Interactive applications generally have a user interface composed of interactive elements (e.g. buttons). The interactive elements usually have multiple states that respond to user action. A user may use a pointing device, usually a computer mouse, to place a pointer at different locations within the interface. Responding to the user's action, such as placing the mouse pointer over an interactive element (rollover), a different graphic of the interactive element under the mouse pointer may be displayed to indicate the different state of the interactive element.
Customarily, interactive elements within an interactive interface can be as simple as having only one state (normal), or two states (normal and rollover), or could be as complex as having four (normal, rollover, pressed, and disabled) or even more states. The author of the interactive interface can associate a variety of predetermined functions to any defined element.
Today, interactive applications are generally constructed by a method known as “cutting and placing.” First, graphics creation and editing software, such as Microsoft® Paint or Adobe Photoshop®, is used to author the overall appearance and layout of the interface. Graphics for each state of each individual interactive element are created, usually by defining and cutting the element from an overall layout, and then saving as an individual file. For a two state element, such as a button, it is typically displayed in a normal state, but then displayed in a rollover state in response to mouse location. The author manually creates and saves at least one image for the rollover state of the button and a background image containing the normal image of the button at the correct geometric position. This method requires the cutting and placing of a large number of graphic files when the interactive interface is complex, such as when multiple interactive elements are desired. In certain instances, for an interface containing multiple elements having multiple states, the number of images “I” requiring creation would be at least I=(E×(S−1))+1, where “E” is the number of interactive elements in the interface and “S” is the number of states (assuming all elements have the same number of states). Other instances require that a graphic be created for each state of each of the individual interactive elements. In these other instances, the number of graphics an author must create and manage increases to I=(E×S)+1.
The second step of the construction process requires placement of the created images at their proper geometric position within the interface. To create the final interface, the author would usually need a second software application, such as Adobe® Flash® or Microsoft® Visual Studio®. Using these tools, the author places an individual image for each state of each interactive element against a background graphic, trying to place the respective state image of the interactive element back in the exact, original location of the element within the overall layout. When individual graphic files are created and saved for each element at the cutting stage, the files only retain their size information, but not their positional information in relation to the overall interface from which the element was cut. Because of the lack of inherent positional information in the files, the author must manually line up each of the completed, individual pieces of graphic to achieve the intended look, usually through multiple rounds of painstaking trial and error.
Lastly, the graphic for each state of each interactive element must be assembled, and functionality defined, so that a pre-determined function is assigned to each state of each element in response to user input. Depending on the output platform, the defining can occur during reassembly of the element layers in the overall interface, or as a separate step. The entire process is time-consuming and prone to error, making the “cutting and placing,” and the defining and reassembly inefficient and labor intensive. If the author later decides to change an image for one or more states of one or more elements, or decides to add a state, the entire process of “cutting and placing,” and defining and reassembly of the respective elements must be completely performed again.